<template>
  <div
      class="el-select-dropdown el-popper"
      :class="[{ 'is-multiple': $parent.multiple }, popperClass]"
      :style="{ minWidth: minWidth }"
      style="padding: 5px"
  >
    <ElScrollbar
        tag="ul"
        wrap-class="el-select-dropdown__wrap"
        view-class="el-select-dropdown__list"
        ref="scrollbar"
    >
      <el-tree
          ref="tree"
          default-expand-all
          :expand-on-click-node="false"
          :data="data"
          :props="treeProps"
          :node-key="treeNodeKey"
          @node-click="treeNodeClick"
          highlight-current
      ></el-tree>
    </ElScrollbar>
  </div>
</template>

<script type="text/babel">
import Popper from 'element-ui/src/utils/vue-popper';
import ElScrollbar from 'element-ui/packages/scrollbar';
import _ from 'lodash';

export default {
  name: 'DropDown',
  componentName: 'DropDown',
  components: { ElScrollbar },
  mixins: [Popper],
  props: {
    placement: {
      default: 'bottom-start',
    },
    boundariesPadding: {
      default: 0,
    },
    popperOptions: {
      default() {
        return {
          gpuAcceleration: false,
        };
      },
    },
    visibleArrow: {
      default: true,
    },
    appendToBody: {
      type: Boolean,
      default: true,
    },
    treeData: {
      type: Array,
      required: true,
    },
    treeProps: {
      type: Object,
      required: true,
    },
    treeNodeKey: {
      type: String,
      required: true,
    },
    currentKey: {
      type: String,
    },
  },
  data() {
    return {
      minWidth: '',
      data: null,
    };
  },
  computed: {
    popperClass() {
      return this.$parent.popperClass;
    },
  },
  methods: {
    treeNodeClick(data) {
      this.$emit('treeNodeClick', data);
    },
  },
  watch: {
    '$parent.inputWidth'() {
      this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px';
    },
    '$parent.selectedLabel'(val) {
      const { label, children } = this.treeProps;
      const key = this.treeNodeKey;
      let nodeKey;
      const getKey = (array) => {
        for (let i = 0; i < array.length; i++) {
          let item = array[i];
          if (item[label] && item[label].includes(val)) {
            nodeKey = item[key];
            return;
          } else {
            if (item[children]) getKey(item[children]);
          }
        }
      };
      getKey(this.treeData);
      const tmp = this.$refs.tree.getNode(nodeKey);
      if (this.$parent.visible) {
        if (tmp && tmp.data) {
          this.data = [tmp.data];
        } else {
          this.data = [];
        }
      } else this.data = this.treeData;
    },
  },
  created() {
    this.data = _.cloneDeep(this.treeData);
  },
  mounted() {
    this.referenceElm = this.$parent.$refs.reference.$el;
    this.$parent.popperElm = this.popperElm = this.$el;
    this.$on('updatePopper', () => {
      if (this.$parent.visible) {
        this.updatePopper();
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.currentKey);
        });
      }
    });
    this.$on('destroyPopper', this.destroyPopper);
  },
};
</script>
